import React, { Component, useEffect, useState } from 'react'
function HooksTest() {
    const [count, setCount] = useState(0);
    let add = () => {
        console.log(11);
        // 加法
        setCount(count + 1);
    }
    const [name, setName] = useState('庆儿');
    let changeName = () => {
        setName('tom')
    }
    useEffect(() => {
        // 初始化  替代了componentDidMount componentDidUpdate
        console.log('useeffect');

    }, [count])
    /* useEffect 有两个参数第一个参数 回调函数  第二参数数组 触发的对象 */
    useEffect(() => {
        let timer = setInterval(() => {
            console.log('second useeffect');

        }, 500);
        // 在useeffect中返回一个函数，即取消useEffect带来的副作用，相当于componentWillUnmout
        return () => {
            console.log('终止掉');
            clearInterval(timer);
        }
    })
    return (
        <div>
            <h1>hooks Test</h1>
            <h1>{count}</h1>
            <button onClick={add}>count+1</button>
            <h1>{name}</h1>
            <button onClick={changeName}>changeName</button>
        </div>
    )
}

export default HooksTest;
/* 
useState react  16.8以上版本才有的
作用class组件中state

从react中引入useState
  const [count, setCount] = useState(0);
  第一个值是变量名
  第二个值是更改变量的函数
  useState() 传入的是初始值
  如果有多个初始值，可以多次调用useState 注意变量命名不要重复

useEffect 函数组件中的声明周期
初始化 渲染 销毁

*/